<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello Vue</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
</body>

<script type="text/javascript">
    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    var vm = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        },
        // created 钩子可以用来在一个实例被创建之后执行
        created: function () {
            // `this` 指向 vm 实例
            console.log('message is: ' + this.message)
        }
        // 不要在选项属性或回调上使用箭头函数, 因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
        // created: () => console.log('message is: ' + this.message) 
    })
</script>

</html>